import React, {Component} from "react";
import Header from "./components/Header";
import ToDoList, {ToDo} from "./components/ToDoList";
import Footer from "./components/Footer";


export default class App extends Component {

    state = {
        toDoList: []
    }

    addToDo = (toDo: ToDo) => {
        let list = this.state.toDoList;
        this.setState({toDoList: [toDo, ...list]})
    }

    updateToDo = (id: string, isChecked: boolean) => {

        let list = this.state.toDoList;
        let uList = list.map((value: ToDo) => {
            if (value.id === id) {
                value.isChecked = isChecked
                return value
            }else{
                return value
            }
        })

        this.setState({toDoList: [...uList]})


    }

    deleteToDo = (id: string) => {
        let list = this.state.toDoList;
        let uList = list.filter((value: ToDo) => {
            return value.id != id;
        })
        this.setState({toDoList: [...uList]})
    }


    selectAll = (e: any) => {
        let toDoList = this.state.toDoList;
        toDoList.map((t: ToDo) => t.isChecked = e.target.checked);
        this.setState({toDoList: [...toDoList]})
    }

    render() {
        const {toDoList} = this.state;
        return (
            <>
                <Header addToDo={this.addToDo}/>
                <ToDoList toDoList={toDoList} updateToDo={this.updateToDo} deleteToDo={this.deleteToDo}/>
                <Footer selectAll={this.selectAll} toDoList={toDoList}/>
            </>
        )
    }
}